<template>
  <view class="page-archives" v-cloak>
    <view class="archives-tabs not-bar">
      <view class="tabs-item" :class="curTabs == idx?'active':''" v-for="(item,idx) in tabsList" :key="idx" @click="curTabs = idx">{{item}}</view>
    </view>
    <view class="empty">
      <image src="@/static/no-page.png" class="img" mode="aspectFill"></image>
      <view class="p">敬请期待...</view>
    </view>
    <view class="archives-records" v-show="false">
      <view class="header">
        <view class="header-label">时间范围</view>
        <uni-datetime-picker class="header-rang" v-model="dateRang" type="daterange" start="2021-3-20" rangeSeparator="至" />
      </view>
      <view class="archives-title">
        <view class="title">全部（10）</view>
        <view class="title-span">
          <image src="@/static/sort.png" mode="aspectFill" class="icon"></image>
          时间
        </view>
      </view>
      <view class="records-list">
        <view class="list-item" v-for="(item,idx) in 4" :key="idx">
          <view class="item-info">
            <view class="h2 dot">爱尚大众口腔（保利花园店）</view>
            <view class="p">洗牙</view>
            <view class="p">2021-09-11 08:55</view>
          </view>
          <view class="item-sub">处方详情 <uni-icons type="right" size="14" color="#B0B0B0"></uni-icons> </view>
        </view>
      </view>
    </view>
    <view class="archives-records" v-show="false">
      <view class="archives-title">
        <view class="title">全部（10）</view>
        <view class="title-span">
          <image src="@/static/sort.png" mode="aspectFill" class="icon"></image>
          时间
        </view>
      </view>
      <view class="records-list">
        <view class="list-item" v-for="(item,idx) in 4" :key="idx">
          <view class="item-info">
            <view class="box-flex">
              <view class="h2 dot">爱尚大众口腔（保利花园店）</view>
              <view class="title-tag">已出</view>
            </view>
            <view class="p">2021-09-11 08:55</view>
          </view>
          <view class="item-sub">查看详情 <uni-icons type="right" size="14" color="#B0B0B0"></uni-icons> </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabsList:['就诊记录','处置','病历','影像','协议'],
        curTabs:0,
        dateRang:''
      };
    }
  }
</script>

<style lang="less" scoped>
.page-archives{
  .archives-tabs{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    padding-left: 24rpx;
    overflow-x: auto;
    background: #fff;
    .tabs-item{
      font-size: 28rpx;
      color: #6D6D6D;
      position: relative;
      padding: 28rpx 0;
      margin-right: 44rpx;
      white-space: nowrap;
      &::after{
        position: absolute;
        display: block;
        content: '';
        width: 50rpx;
        height: 6rpx;
        background: transparent;
        bottom: 14rpx;
        left: 50%;
        transform: translate(-50%,0);
      }
      &.active{
        font-weight: bold;
        color: var(--theme-color);
      }
      &.active::after{
        background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      }
    }
  } /// archives-tabs end
  
  .archives-title{
    display: flex;
    align-items: center;
    line-height: 80rpx;
    background: var(--page-bg);
    padding: 0 24rpx;
    .title{
      font-size: 24rpx;
      color: var(--sub-title);
      margin-right: auto;
    }
    .title-span{
      font-size: 28rpx;
      color: #6D6D6D;
      display: flex;
      align-items: center;
    }
    .icon{
      width: 32rpx;
      height: 32rpx;
      margin-right: 4rpx;
    }
  }
  .archives-records{
    .header{
      background: #fff;
      padding: 22rpx 24rpx;
      display: flex;
      align-items: center;
      .header-label{
        font-size: 30rpx;
        color: var(--title-color);
        margin-right: 18rpx;
      }
      ::v-deep.uni-date__x-input{
        height: 76rpx;
      }
      ::v-deep.uni-date-x--border{
        border-color: #efefef;
      }
    }
    .records-list{
      padding: 0 24rpx;
      .list-item{
        padding: 32rpx 0;
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid #efefef;
        &:last-child{
          border-bottom: 0;
        }
        .item-info{
          margin-right: auto;
          .h2{
            font-size: 28rpx;
            color: var(--title-color);
            font-weight: bold;
          }
          .title-tag{
            color: var(--theme-color);
            border: 2rpx solid var(--theme-color);
            line-height: 1;
            font-size: 20rpx;
            padding: 6rpx 14rpx;
            border-radius: 8rpx;
            margin-left: 20rpx;
          }
          .p{
            font-size: 24rpx;
            color: #6D6D6D;
            margin-top: 20rpx;
            line-height: 1;
          }
        }
        .item-sub{
          font-size: 24rpx;
          color: var(--sub-title);
        }
      }
    }
  }  //  archives-records end
  .empty{
    min-height: 100vh;
    box-sizing: border-box;
    background: var(--page-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    .img{
      width: 336rpx;
      height: 174rpx;
      margin-bottom: 34rpx;
      margin-top: 448rpx;
    }
    .p{
      font-size: 28rpx;
      color: #6D6D6D;
    }
  }
}
</style>
